<template>
  <div class="workbenchDetail">
    <van-nav-bar
      :title="params.ApplicantType + '详情'"
      left-arrow
      @click-left="goBackHandlePre"
      @click-right="goSetting"
      :fixed="true"
      :border="false"
      :safe-area-inset-top="true"
      style="padding-top: 0px"
    >
      <!-- <template #right>
        <van-icon name="setting" size="18" color="#000" />
      </template> -->
    </van-nav-bar>
    <div class="dataContent">
      <div>
        <div class="content contentTop">
          <span class="nameApply"
            >{{ params.ApplicantName }}的{{ params.ApplicantType }}</span
          >
          <span class="applyStatus">{{ params.StatusName }}</span>
        </div>
        <div class="content contentDetail">
          <div><span class="formItem">审批编号</span>{{ params.Id }}</div>
          <div><span class="formItem">提交时间</span>{{ params.CreateAt }}</div>
          <div><span class="formItem">所在部门</span>{{ params.DeptName }}</div>
          <div>
            <span class="formItem">开始时间</span>{{ params.StartDate }}
          </div>
          <div><span class="formItem">结束时间</span>{{ params.EndDate }}</div>
          <div v-if="params.ApplicantType == '请假'">
            <span class="formItem">{{ params.ApplicantType }}时长</span
            >{{ params.Duration }}天
          </div>
          <div  v-if="params.ApplicantType == '加班'">
            <span class="formItem">{{ params.ApplicantType }}时长</span
            >{{ params.Duration }}小时
          </div>
          <div style="display: flex" v-if="params.ApplicantType == '漏打卡'">
            <div style="white-space: nowrap; margin: 0 30px 0 0">
              所在项目组
            </div>
            <div class="reason" style="margin: 0">{{ params.Reason }}</div>
          </div>
          <div style="display: flex" v-else>
            <div style="white-space: nowrap; margin: 0 30px 0 0">
              {{ params.ApplicantType }}事由
            </div>
            <div class="reason" style="margin: 0">{{ params.Reason }}</div>
          </div>
          <!-- <div>
            <span class="formItem">{{ params.ApplicantType }}事由</span
            >{{ params.Reason }}
          </div> -->
        </div>
        <div class="content contentDetail">
          <div class="approvalProcess">审批流程</div>
          <div>
            <van-icon name="user-circle-o" />
            <span>{{ params.ApproverName }}</span>
            <div class="iconCircle" v-if="params.ApproverName"></div>
            <span>{{ params.StatusName }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <van-button
        type="default"
        v-if="role !== 0 && params.Status == 1"
        @click="clickBackout(1)"
        >同意</van-button
      >
      <van-button
        type="default"
        v-if="role !== 0 && params.Status == 1"
        @click="clickBackout(2)"
        >驳回</van-button
      >
      <van-button
        type="default"
        v-if="role == 0 && params.Status == 1"
        @click="clickBackout(3)"
        >重新提交</van-button
      >
      <van-button
        class="backOutBtn"
        type="default"
        @click="clickBackout(4)"
        v-if="params.Status == 6 && role == 0"
        >撤销</van-button
      >
      <van-button
        type="default"
        v-if="role == 0 && params.Status == 1"
        @click="clickBackout(4)"
        >撤销</van-button
      >
      <van-button
        class="backOutBtn"
        type="default"
        @click="clickBackout(4)"
        v-if="params.Status == 4 && role !== 0"
        >撤销</van-button
      >
    </div>
    <van-dialog
      v-model="show"
      title="提示信息"
      :message="dialogMsg"
      show-cancel-button
      @confirm="confirm"
      confirm-button-color="#006dff"
    />
  </div>
</template>
<script>
import { SuccesFN } from '@/DceMessage'
import backMixin from '@/backMixin'
export default {
  name: 'workbenchDetail',
  mixins: [backMixin],
  data() {
    return {
      params: {}, //接口路由传参
      show: false, //是否显示dialog弹窗
      role: '', //当前用户权限
      askOffLength: 0, //待处理数量
      id: '', //当前登录id
      dialogMsg: '' //弹窗提示信息
    }
  },
  created() {
    // 如果点击了重新提交按钮，跳转到申请页面，点击了返回
    let aaa = JSON.parse(window.localStorage.getItem('askOffOrOverTimeData'))
    if (aaa) {
      this.params = aaa
      localStorage.removeItem('askOffOrOverTimeData')
    }
    if (this.$route.params.params) {
      this.params = this.$route.params.params
      let CreateAt = new Date(this.params.CreateAt)
      let sm = CreateAt.getMonth() + 1
      sm < 10 ? (sm = '0' + sm) : sm
      let sd = CreateAt.getDate()
      sd < 10 ? (sd = '0' + sd) : sd
      let sh = CreateAt.getHours()
      sh < 10 ? (sh = '0' + sh) : sh
      let sMinute = CreateAt.getMinutes()
      sMinute < 10 ? (sMinute = '0' + sMinute) : sMinute
      this.params.CreateAt = `${CreateAt.getFullYear()}-${sm}-${sd} ${sh}:${sMinute}`
    }
    if (this.$route.params.leaveManger) {
      this.params = this.$route.params.leaveManger.data
      this.params.ApplicantType = this.$route.params.ApplicantType
      let CreateAt = new Date(this.params.CreateAt)
      let sm = CreateAt.getMonth() + 1
      sm < 10 ? (sm = '0' + sm) : sm
      let sd = CreateAt.getDate()
      sd < 10 ? (sd = '0' + sd) : sd
      let sh = CreateAt.getHours()
      sh < 10 ? (sh = '0' + sh) : sh
      let sMinute = CreateAt.getMinutes()
      sMinute < 10 ? (sMinute = '0' + sMinute) : sMinute
      this.params.CreateAt = `${CreateAt.getFullYear()}-${sm}-${sd} ${sh}:${sMinute}`
    }
    console.log(this.params)
    //从缓存中获取权限
    this.role = JSON.parse(
      window.localStorage.getItem('attendance-records')
    ).role
    //从缓存中获取当前登录id
    this.id = JSON.parse(window.localStorage.getItem('attendance-records')).id
    this.askOffLength = this.day(this.params.StartDate, this.params.EndDate)
  },
  mounted() {},
  methods: {
    // 点击设置按钮
    goSetting() {
      console.log('点击设置按钮')
      this.$router.push({
        name: 'settingPage'
      })
    },
    // 点击底部功能按钮
    clickBackout(val) {
      this.show = true
      console.log(val)
      if (val == 1) {
        this.dialogMsg = '确定要同意吗？'
      } else if (val == 2) {
        this.dialogMsg = '确定要驳回吗？'
      } else if (val == 3) {
        this.dialogMsg = '确定要撤销并重新提交吗？'
      } else if (val == 4) {
        this.dialogMsg = '确定要撤销吗？'
      }
    },
    //返回日期区间总天数
    day(startDateFrom, endDateTo) {
      if (this.starttime == '' && this.finishtime == '') {
        return '自动计算/最小单位0.5天'
      } else {
        var sdate = new Date(this.starttime)
        var now = new Date(this.finishtime)
        var days = now.getTime() - sdate.getTime()
        var day = parseInt(days / (1000 * 60 * 60 * 24))
        console.log(day)
        if (
          now == sdate ||
          (startDateFrom == '上午' && endDateTo == '上午') ||
          (startDateFrom == '下午' && endDateTo == '下午')
        ) {
          day = day + 0.5
        } else if (startDateFrom == '上午' && endDateTo == '下午') {
          day = day + 1
        }
        console.log('天数》》》》》', day)
        return day
      }
    },
    // 点击dialog的确认按钮
    confirm() {
      this.show = false
      if (this.dialogMsg == '确定要同意吗？') {
        this.$axios({
          url: '/attendance-api/application-approve',
          method: 'POST',
          data: {
            applicationId: this.params.Id,
            approverId: this.id,
            status: 6
          }
        }).then(res => {
          if (res) {
            SuccesFN(res.data.Message)
            localStorage.setItem('isRefresh', 1)
            this.$router.go(-1)
          }
        })
      } else if (this.dialogMsg == '确定要驳回吗？') {
        this.$axios({
          url: '/attendance-api/application-approve',
          method: 'POST',
          data: {
            applicationId: this.params.Id,
            approverId: this.id,
            status: 4
          }
        }).then(res => {
          if (res) {
            SuccesFN(res.data.Message)
            localStorage.setItem('isRefresh', 1)
            this.$router.go(-1)
          }
        })
      } else if (this.dialogMsg == '确定要撤销并重新提交吗？') {
        // 点击重新提交按钮，撤销当前申请，跳转到新申请
        // this.$axios({
        //   url: '/attendance-api/application-cancel',
        //   method: 'POST',
        //   data: {
        //     applicationId: this.params.Id,
        //     status: 3
        //   }
        // }).then(res => {
        //   if (res) {
        //     localStorage.setItem('isRefresh', 1)
        //     this.$router.push({
        //       name: 'outsourcingNewApply'
        //     })
        //   }
        // })
        // localStorage.setItem('isRefresh', 1)
        localStorage.setItem(
          'askOffOrOverTimeData',
          JSON.stringify(this.params)
        )
        if (this.params.ApplicantType == '请假') {
          this.$router.push({
            name: 'askOff',
            params: this.params
          })
        } else if (this.params.ApplicantType == '加班') {
          this.$router.push({
            name: 'overTime',
            params: this.params
          })
        }

        this.show = false
      } else if (this.dialogMsg == '确定要撤销吗？') {
        let backoutStatus = ''
        if (this.params.Status == 6) {
          // 如果是审批通过的数据，外包人员传参为5通过后撤销
          backoutStatus = 5
        } else if (this.params.Status == 4) {
          // 如果是已驳回的数据，部门负责人或管理员传参为1返回到待审批状态
          backoutStatus = 1
        } else if (this.params.Status == 1) {
          // 如果是待审批的数据，外包人员传参为3撤销
          backoutStatus = 3
        }
        // 如果是外包员工
        if (this.role == 0) {
          // 点击撤销按钮，状态为backoutStatus
          this.$axios({
            url: '/attendance-api/application-cancel',
            method: 'POST',
            data: {
              applicationId: this.params.Id,
              status: backoutStatus
            }
          }).then(res => {
            if (res) {
              SuccesFN(res.data.Message)
              localStorage.setItem('isRefresh', 1)
              this.$router.go(-1)
            }
          })
        } else if (this.role !== 0) {
          this.$axios({
            url: '/attendance-api/application-approve',
            method: 'POST',
            data: {
              applicationId: this.params.Id,
              approverId: this.id,
              status: backoutStatus
            }
          }).then(res => {
            if (res) {
              SuccesFN(res.data.Message)
              localStorage.setItem('isRefresh', 1)
              this.$router.go(-1)
            }
          })
        }
      }
    },
    // 点击返回按钮
    goBackHandlePre() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.workbenchDetail:deep {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  .van-nav-bar__arrow {
    font-size: 18px;
    color: #000;
  }
  .van-nav-bar__content {
    .van-nav-bar__title {
      font-size: 18px;
    }
  }
  .reason {
    display: inline-block;
    width: 100%;
    word-break: break-all;
    word-wrap: break-word;
    white-space: normal;
  }
  .dataContent {
    margin-top: 46px;
    .nameApply {
      font-weight: 700;
      padding-right: 10px;
      line-height: 20px;
    }
    .applyStatus {
      font-size: 12px;
      padding: 2px;
      background-color: #f5f5f5;
      border: 1px solid #999;
      border-radius: 5px;
    }
    .content {
      margin: 0;
      text-align: left;
      div {
        margin: 10px 16px;
      }
      .van-icon {
        margin-right: 10px;
      }
    }
    .iconCircle {
      display: inline-block;
      vertical-align: middle;
      height: 5px;
      width: 5px;
      margin: 0 10px !important;
      background-color: black;
      border-radius: 5px;
    }
    .contentTop {
      margin-bottom: 10px;
      padding: 10px 16px;
      background-color: #fff;
    }
    .batch {
      padding: 10px 16px;
    }
    .contentDetail {
      margin-top: 10px;
      color: black;
      padding: 5px 0;
      background-color: #fff;
      .formItem {
        margin-right: 30px;
      }
    }

    .approvalProcess {
      font-weight: 700;
      color: black;
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    .van-button {
      flex: 1;
      margin: 10px 16px;
      background: #e3efff;
      color: #006dff;
      font-size: 16px;
      border-radius: 10px;
      border: 0;
    }
    .van-button:last-child {
      margin-left: 0;
      background-color: #006dff;
      color: #fff;
    }
    .backOutBtn {
      margin-left: 16px !important;
    }
  }
}
</style>
